<script>
    $(document).ready(function() {
        mostrarDatos();
        //DECLARACION DIALOG DIV AGREGAR Y EDITAR USERS
        $("#detallesVentadiv").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");

        /****************************************************/
    });
//FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        $.ajax({
            url: 'http://localhost:26/ecomerce/users/micuentajson',
            dataType: 'json',
            beforeSend: function() {
                $('#micuentadiv').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
                $('#ventasdiv').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {
                if (data != "") {

                    var tabla = "";
                    var usuario = data[0].user;
                    var id = usuario.id;
                    var username = usuario.username;
                    var rut = usuario.rut;
                    var nombre = usuario.nombre;
                    var appaterno = usuario.apellidoPaterno;
                    var apmaterno = usuario.apellidoMaterno;
                    var email = usuario.email;
                    var filename = usuario.filename;
                    tabla += '<img src="/ecomerce/img/uploads/user/filename/' + filename + '" class="imgtabla"><br>';
                    tabla += "<span>Usuario N°:" + id + "</span><br>";
                    tabla += "<span>Nombre de Usuario:" + username + "</span><br>";
                    tabla += "<span>Rut:" + rut + "</span><br>";
                    tabla += "<span>Nombre:" + nombre + "</span><br>";
                    tabla += "<span>Apellidos:" + appaterno + " " + apmaterno + "</span><br>";
                    tabla += "<span>" + email + "</span><br>";
                    var tablaventa = "<table><tr><th>Id Venta</th><th>Estado</th><th>Fecha</th><th>Total</th></tr>";
                    if ((data[0].venta!="") || (data[0].venta!=null)){                    
                    $.each(data[0].venta, function(index, item) {
                        tablaventa += "<tr>";
                        tablaventa += "<td>" + item.id + "</td>";
                        tablaventa += "<td>" + item.estado + "</td>";
                        tablaventa += "<td>" + item.fecha + "</td>";
                        tablaventa += "<td>$ " + item.total + "</td>";
                        tablaventa += '<td><button type="button" class="detalle" data-id="' + item.id + '">Detalle</button></td>';
                        tablaventa += "</tr>";
                    });
                    tablaventa += "</table>";
                    
                    $('#ventasdiv').html(tablaventa);
                    $('#micuentadiv').html(tabla);
                    }else{ 
                     
                    $('#ventasdiv').html("");
                    $('#micuentadiv').html(tabla);
                    }
                } else {
                    tabla = '<center>No hay usuarios en la base de datos</center>';
                    tablaventa = '<center>No tiene ninguna compra registrada</center>';
                    $('#micuentadiv').html(tabla);
                    $('#ventasdiv').html(tablaventa);
                }


            }
        });
    }
    function detalleventas(id) {

        $.ajax({
            url: 'http://localhost:26/ecomerce/ventas/view/' + id,
            dataType: 'json',
            beforeSend: function() {

            },
            success: function(data) {
               
               
                if ((data.detallesVenta != "") || (data.detallesVenta != null)) {
                     var total=0;
                    tabla = "<table><tr><th>Producto</th><th>Precio</th><th>Cantidad</th><th>Subtotal</th></tr>";
                    $.each(data.detallesVenta, function(index, item) {
                      total =total+ parseInt(item.subtotal);
                        tabla += '<tr>';
                        tabla += '<td>' + item.producto + '</td>';
                        tabla += '<td>' + item.precio + '</td>';
                        tabla += '<td>' + item.cantidad + '</td>';
                        tabla += '<td>' + item.subtotal + '</td>';
                      
                       tabla += '</tr>';
                    });
                    tabla +='<tr><td></td><td></td><td>Total:</td><td>$ '+total+'</td></tr>';
                    tabla += '</table>';
                   

                    $('#detallesVentadiv').html(tabla);
                } else {
                    tabla = 'No hay productos asociados';
                    $('#detallesVentadiv').html(tabla);
                }

            }
        });
    }
    $(document).on("click", ".detalle", function() {
        var iddetalle = $(this).attr('data-id');
        detalleventas(iddetalle);
        $("#detallesVentadiv").dialog("open");
    });
</script>
<br><br><hr>
<div id="micuentadiv">

</div>
<h2>Historial de Compras</h2>
<div id="ventasdiv">

</div>
<div id="detallesVentadiv" title="Detalle de ventas">
</div>